<template>
  <div class="cart-bot-bar flex">
    <div><input type="checkbox" v-model="isAllChecked"
                class="check" id="check"
                @click="checkLengthAll"
    >&ensp;<label for="check"> 全部</label> </div>
    <div>合计：{{totalPrice}}</div>
    <div @click="overCart">去结算{{checkLength}}</div>
  </div>
</template>

<script>
  export default {
    name: 'CartBotBar',

    computed: {
      totalPrice() {
        return '￥' + this.$store.state.cartList.filter(item => {
          return item.checked
        }).reduce((preValue, item) => {
          return preValue+ item.price * item.count
        },0).toFixed(2)
      },
      checkLength() {
        return '(' + this.$store.state.cartList.filter(item => item.checked).length + ')';
      },
      isAllChecked: {
        get(){
          return this.$store.state.cartList&&!this.$store.state.cartList.find(item=> !item.checked)
        },
        set(){

        }


      }

    },
    methods: {
      checkLengthAll(){
        if(this.isAllChecked){
          this.$store.state.cartList.forEach(item=> item.checked = false)
        }
        else{
          this.$store.state.cartList.forEach(item=> item.checked = true)
        }
      },
      overCart(){
        if(this.totalPrice === '￥0.00'){
          this.$toast.show('请添加商品',1000)
        }
      }
    }
  }
</script>

<style  scoped="scoped">
  .cart-bot-bar {
    display: flex;
    position: fixed;
    bottom: 49px;
    left: 0;
    right: 0;
    height: 40px;
    padding: 0 10px;
    font-size: 13px;
    align-items: center;
    justify-content: space-between;
    background-color: #fff;
    border-bottom: 1px solid #ececec;
    border-top: 1px solid #ececec;
  }
    .check {
      width: 18px;
      height: 18px;
      overflow: hidden;
      border-radius: 100%;
      vertical-align: bottom;
      border: 1px solid #ececec;
    }
    .check:checked {
      border: 1px solid red;
      background: url(../../../assets/img/top.png) no-repeat center;
      background-size: cover;
    }

</style>